<div ng-controller="historyOrderController">
    <div class="contain">
        <div class="container-fluid">
            <div class="container">
                <h2>My Order--history order</h2>
                <hr>
                <div class="row">
                    <ul class="order-msg history-panel">
                        <li class="merchant-msg">
                            <div class="history-header">
                                <div class="history-item">
                                    <b>Order Time</b>
                                </div>
                                <div class="history-item">
                                    <b>Merchant</b>
                                </div>
                                <div class="history-item">
                                    <b>Status</b>
                                </div>
                                <div class="history-item">
                                    <b>Detail</b>
                                </div>
                                <div class="history-item">
                                    <b>Evaluate</b>
                                </div>
                            </div>
                        </li>
                        <!--<c:forEach var="order" items="${historicalOrders }">-->
                        <li class="merchant-msg" ng-repeat="order in historicalOrders">
                            <div class="history-msg">
                                <div class="history-item">
                                    <span>{{order.createDate }}</span>
                                </div>
                                <div class="history-item">
                                    <span>{{order.merchant.mname }}</span>
                                </div>
                                <div class="history-item">
                                    <span>{{order.confirmStr }}</span>
                                </div>
                                <div class="history-item">
                                    <span ng-click="order.showDetail = !order.showDetail" class="btn-detail fa"
                                          ng-class="{true: 'fa-minus', false : 'fa-plus'}[!!order.showDetail]"></span>
                                </div>
                                <div class="history-item" ng-controller="ModalDemoCtrl as $ctrl">
										<span id="{{order._id }}">
                                                <!--<button ng-if="order.evaluate==0 " class="btn btn-warning"-->
                                                        <!--ng-click="onEvaluate(0,order._id)">-->
                                                    <!--评价-->
                                                <!--</button>-->
                                                <div ng-if="order.evaluate==0">
                                                    <button class="btn btn-danger"
                                                            ng-click="$ctrl.open(1,order,'complaint')">
                                                        投诉
                                                    </button>

                                                    <button class="btn btn-warning"
                                                            ng-click="$ctrl.open(2,order,'grade')">
                                                        评分
                                                    </button>
                                                </div>

                                                <button ng-if="order.evaluate==1" class="btn btn-danger"
                                                        ng-click="$ctrl.open(1,order,'complaint')">
                                                    投诉
                                                </button>

                                                <button ng-if="order.evaluate==2" class="btn btn-warning"
                                                        ng-click="$ctrl.open(2,order,'grade')">
                                                    评分
                                                </button>
										</span>
                                        <script type="text/ng-template" id="myModalGrade.html">
                                            <div class="modal-header">
                                                <h3 class="modal-title" class="modal-title">Mark</h3>
                                            </div>
                                            <div class="modal-body" class="modal-body">
                                                <div class="well">
                                                    <div star rating-value="ratingVal" max="max" on-hover="onHover" on-leave="onLeave" readonly="{{readonly}}"></div>
                                                    <p>score:<span class="score" >{{hoverVal?hoverVal:ratingVal}}</span></p>
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
                                                <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
                                            </div>
                                        </script>

                                        <script type="text/ng-template" id="myModalComplaint.html">
                                            <div class="modal-header">
                                                <h3 class="modal-title" class="modal-title">Complaint</h3>
                                            </div>
                                            <div class="modal-body" class="modal-body">
                                                <div>
                                                    <textarea name="" id="" cols="85" rows="8" placeholder="{{placeholder}}" ng-model="message"></textarea>
                                                    <p ><span ng-bind="left()" class="word-write"></span></p>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
                                                <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
                                            </div>
                                        </script>

                                </div>
                            </div>
                            <div ng-show="order.showDetail" class="order order-detail">
                                <table class="table table-content">
                                    <!--<c:forEach var="item" items="${order.orderItems }">-->
                                    <tr ng-repeat="item in order.orderItem">
                                        <td class="td-img"><img src="{{constant.imgServer}}{{item.dish.img}}" alt=""
                                                                class="dish-img"></td>
                                        <td class="td-dName">{{item.dish.dname }}</td>
                                        <td class="td-price">&yen;{{item.dish.price }}</td>
                                        <td class="td-sum">{{item.num }}</td>
                                        <td>&yen;{{item.smallSum }}</td>
                                    </tr>
                                    <!--</c:forEach>-->
                                    <tr>
                                        <td colspan="4"></td>
                                        <td>&yen;{{order.total }}</td>
                                    </tr>
                                </table>
                            </div>
                        </li>
                        <!--</c:forEach>-->
                    </ul>
                </div>
            </div>
            <!--container end-->
        </div>

    </div>
    <div id="sssModal0" class="modal fade" role="dialog"
         aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="login-bg">
                <div class="contain">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div class="container-fluid"></div>
                            <div class="module form-module">
                                <div class="toggle">Complaints</div>
                                <div class="form" id="mark-div">
                                    <div>
                                        <h2>
                                            <img src="images/mark.png" width="5%" height="5%"> Mark
                                        </h2>
                                    </div>
                                    <div class="goods-comm">
                                        <div class="goods-comm-stars">
												<span class="star_l"><h5>Please give your grade
                                                    for this ordering:</h5></span>

                                            <div id="rate-comm-1" class="rate-comm"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form l_text" id="complaints-div">
                                    <div>
                                        <h2>
                                            <img src="images/complain.png" width="8%" height="8%">
                                            Complaints
                                        </h2>
                                    </div>
                                    <label class="m_flo"></label>
                                    <input id="mark-oid" type="text" value="0"
                                           style="display: none" name="oid">
                                    <textarea name="complaints" form="complainform" class="text"
                                              id="complaints"></textarea>
                                    <input type="button" value="Submit" id="complain-submit">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>